<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link type="text/css" rel="stylesheet" href="/layui/css/layui.css">
    <link type="text/css" rel="stylesheet" href="/css/login.css">
    <script src="/jquery/jquery-3.6.0.js"></script>
    <script src="/layui/layui.js"/>
    <script>
        layui.use(['layer', 'laydate'], function(){
            var layer = layui.layer,
                laydate = layui.laydate;

        });
    </script>
</head>
<body>
        <div id="main"><div id="divhead">
            <p>LOGIN</p>
        </div>
            <form name="form" method="post" id="form">

                <div id="divuser">
                    <span>用户名：</span>
                    <input type="text" placeholder="Username" name="username">
                </div>
                <div id="divpass">
                    <span>密 码：</span>
                    <input type="password" placeholder="Password" name="password">
                </div>
                <br/>
                <div id="divimg">
                    <img src="/kaptcha" onclick="changeImg(this)" /><br/><br/>
                    <span>验证码：</span>
                    <input type="text" placeholder="请输入验证码" name="kapText">
                </div>
                <div id="divsub">
                    <button type="submit" value="Login" id="submit">login</button>
                </div>
            </form>
            <div id ="divend">
                <p>
                    Don't have account?&nbsp;
                    <button><a href="/toreg">Sign up</a></button>
                    <button><a href="/toTeacherLogin">我是教师</a></button>
                </p>
            </div>

        </div>
</body>
<script>
    function changeImg(img) {
            img.src="/kaptcha?x="+Math.random()
    }


    $(function () {
        $('#form').click(function (e) {
         //禁用表单的默认提交事件
            e.preventDefault();
        })

        layui.use(['form', 'layedit', 'laydate'], function () {
            var form = layui.form,
                layer = layui.layer,
                layedit = layui.layedit,
                laydate = layui.laydate;

        });

     $('#submit').on('click',function () {
         $.ajax({
             url:'/logincheck',
             data:JSON.stringify({username:$('input[name=username]').val(),
                 password:$('input[name=password]').val(),
                 kapText:$('input[name=kapText]').val(),
             }),
             type:'post',
             contentType:'application/json;charset=utf-8',
             dataType:'json',
             success:function (response) {
                if(response.success){
                    layer.msg(response.msg)
                    location="/index"
                }else{
                    layer.msg(response.msg)
                    location="/toLogin"
                }
             }
         })
     })
    })
</script>
</html>